<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设备预警参数配置</title>
    <style>
        .nicescroll-rails.nicescroll-rails-vr{
            background: transparent!important;
            left:2.715rem!important;
        }
    </style>
</head>
<body>
    <div class="right-top-tools" style="height:50px">
        <div class="zd-tab clearfix" style="height:50px">
           <span style="color:#3c619e;font-weight: bold">预警参数配置  </span>
        </div>
    </div>
	<div class="right-top-tools">
		<div class="data-class-btns clearfix">
			<div id="tbl_surface_move_device_data" class="class-btn active" station_type="14">
				<div class="icon icon-bg wy">
					<div class="pic"></div>
				</div>
				位移监测
			</div>
			<div id="tbl_deep_move_device_data" class="class-btn" station_type="5">
				<div class="icon icon-bg xz">
					<div class="pic"></div>
				</div>
				深度位移
			</div>
			<div id="tbl_rain_device_data" class="class-btn" station_type="1">
				<div class="icon icon-bg yl">
					<div class="pic"></div>
				</div>
				雨量监测
			</div>
			<div id="tbl_water_device_data" class="class-btn" station_type="2">
				<div class="icon icon-bg ot">
					<div class="pic"></div>
				</div>
				含水率监测
			</div>
			<div id="tbl_pressure_device_data" class="class-btn" station_type="20">
                <div class="icon icon-bg sy">
                    <div class="pic"></div>
                </div>
 				渗压监测
            </div>
            <div id="tbl_flow_device_data" class="class-btn" station_type="200">
                <div class="icon icon-bg ll">
                    <div class="pic"></div>
                </div>
				流量监测
            </div>
		</div>
		<div class="zd-tab clearfix z1">
			<div id="devices_tabs">
			</div>
			<div class="draptop"></div>
		</div>
		<div class="right-top-tools-open"></div>														
	</div>
	<div class="table_filter"  style="height:50px;text-align:left;padding-top:6px;">
			<div class="dataTables_filter" id="searchDiv">
				 <div class="btn-group" style="float:right;display:none" id="btns">
					<button id="batch_warnconfig_modify" type="button" class="btn btn-default" data-btn-type="add">批量操作</button>
				</div>
			</div>
		</div>
    <div class="table-container" style="margin-top:0px">
        
        <table id="warnconfig_table" class="display" cellspacing="0" width="100%" style="text-align:center">
            <thead id="warnconfig_table_header">
            	<tr>
                    <th style="text-align:center">设备名称</th>
                    <th style="text-align:center">预警项目</th>
                    <th style="text-align:center">预警级别</th>
                    <th style="text-align:center">预警阀值</th>
                    <th style="text-align:center">预警方式</th>
                    <th style="text-align:center">联系人</th>
                </tr>
            </thead>
        </table>
   </div>
   <script type="text/javascript">
	var dataTimeType = "latest";//最新数据
	var Dtable_project = null;
	var dataType = null;
	var station_type = null;
	var device = null;
	
    $(".class-btn").click(function(){
	    	dataType = this.id;
	    	$(".class-btn").removeClass("active");
        $(this).addClass("active");
        device = null;
        station_type = $(this).attr("station_type");
        loadDevices();
    });
    $(".table-tab").on("click",".tab",function(){
    		dataTimeType = this.id;
        $(this).addClass("current").siblings(".tab").removeClass("current");
        if($(this).hasClass("ls-data")){
            $(".table-tool").show();
        }else{
            $(".table-tool").hide();
        }
        showDataTable();
    });
    
    //允许多个设备
    function devices_tabClick(btn){
	    	if( $("#"+btn.id).hasClass("device_tab_clicked") ){
	    		$("#"+btn.id).removeClass("device_tab_clicked");
	    	}else{
	    		$("#"+btn.id).addClass("device_tab_clicked");
	    	}
        device = null;
        $(" .device_tab_clicked").each(function(){
	        	if( device == null || device == "null" || device == "" ){
	        		device = this.id;
	        	}else{
	        		device += "," + this.id;
	        	}
        });
        showDataTable();
    }
    
    var theight=0;
    $(".draptop").on("click",function(){
        theight=$(".right-top-tools")[0].clientHeight;
        $(".right-top-tools").animate({'height':"0px"});
        setTimeout(function(){
            $(".right-top-tools-open").show();
        },200);
    });	
	function search(){
		Dtable_project.ajax.reload();
	}
	function likeFilterReset(){
		$("#likeFilter").val("");
	}	
	//获取数据展示的列名
	function getDatatableColumns(){
		var columnString = "devicename,option_name,warn_level,warn_value,warn_type,contact_person";
		var columnList = [];//显示列对应的json字段       
        var colArr = columnString.split(',');
        for (var i = 0; i < colArr.length; i++) {
            var obj = {};
            obj['data'] = colArr[i];
            columnList.push(obj);
        }
        return columnList;
	}
	
	//组织一个datatables的setting对象
	function getDatatableSettings(){
		var _pagesize = 10;
    		var _url = "../../tbl_station_warn_config/list";
		var setting =  {
		    "info":0,
		    "pageLength": _pagesize,
		    "lengthChange":false,
		    "searching":false,
		    "ordering":true,
		    "processing": true,
		    "serverSide": true,
		    "destroy":true,
		    "ajax": { 
		     	url: _url,  
		        type: "post",
		        contentType: "application/json",
		        dataType: "json",
		        data: function( data ) {
		            if( data.order && data.order.length > 0 && data.columns && data.columns.length > 0 ){
			            	data.orderIndex = data.order[0].column;
			            	if( data.columns.length >= ( data.orderIndex + 1 )){
			            		data.orderColName = data.columns[data.orderIndex].data;
			            	}
			            	data.orderType = data.order[0].dir;
		            }
		            //处理组织起来的只显示用的列进行排序的情况
		            if( data.orderColName == "devicename" ){
		            		data.orderColName = "deviceid";
		            }
		            if( data.orderColName == "devicetype" ){
		            		data.orderColName = "deviceid";
		            }
		            //模糊查询
		            if( $("#likeFilter").val() != null && $("#likeFilter").val() != "" ){
		            		data.likeFilter = $("#likeFilter").val();
		            }
		            if( device != null ){
		            		data.deviceids = device.split(",");
		            }
		            data.page = data.start/data.length + 1;
		            data.pagesize = _pagesize;
		            data.deviceType = station_type;
		            return JSON.stringify(data);
		        },
		        dataSrc: function ( json ) {
		           	$(json.data).each(function(){
		           		if( this.update_time ){
		           			this.update_time = new Date(this.update_time).format("yyyy-MM-dd hh:mm:ss");
		           		}
		           		if( this.create_time ){
		           			this.create_time = new Date(this.create_time).format("yyyy-MM-dd hh:mm:ss");
		           		}
		            });
		            json.recordsTotal = json.pagination.totalRecord;
		            json.recordsFiltered = json.pagination.totalRecord;
		            return json.data;
		        }
		    },
		    rowsGroup: [
		        'first:devicename',
		        'second:devicename'
		    ],
		    "columns": getDatatableColumns( dataType ),
		    "language": {
		        "paginate": {
		            "next": "下一页",
		            "previous": "上一页",
		        }
		    }
		} 
		return setting;
	}
	
	//加载一个数据表格
	function showDataTable(){
		Dtable_station_warnconfig = $('#warnconfig_table').DataTable( getDatatableSettings() );
	}
	
	function loadDevices( selected_station_id ){
		var param = {};
		param.station_type = station_type;
		param.tree_level = global.device_data_tree_selected_level;
		param.tree_id = global.device_data_tree_selected_id;
		var json_data = JSON.stringify(param);
		var url = "../../tbl_station_info/list";
		$.ajax({
			url: url,
			type : 'post',
		    async : false,
			data: json_data,
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function( json ) {
				var html="";
				if( json.data ){
					$(json.data).each(function(){
						if( selected_station_id != null && this.station_id == selected_station_id ){
							html += "<div class=\"device_tab device_tab_clicked\" onclick=\"devices_tabClick(this)\" id=\""+this.station_id+"\">"+this.station_name+"</div>";
					    		device = this.station_id;
						}else{
							html += "<div class=\"device_tab\" onclick=\"devices_tabClick(this)\" id=\""+this.station_id+"\">"+this.station_name+"</div>";
						}
					});
					html += "<div class=\"draptop\"></div>"; 
					$("#devices_tabs").html(html);
				}
				showDataTable();
			}
		});
	}
	
    $(document).ready(function(){
	    	dataType = $(".class-btn.active").attr("id");
	    	station_type = $(".class-btn.active").attr("station_type");
	    	
	    	if("ADMIN" == global.currentRole) {
	    		$("#btns").show();
	    	}
	    	
	    	if( global.search_station_type != null ){
	        	$(".class-btn").each(function(){
	        		if( $(this).attr("station_type") == global.search_station_type ){
	        			dataType = this.id;
	        	    	$(".class-btn").removeClass("active");
	        	        $(this).addClass("active");
	        	        station_type = $(this).attr("station_type");
	        		}
	        	});
	        }
	    	
	    	//加载第一种类型数据所涉及到的设备信息
	    	loadDevices( global.search_station_id );
	    	//加载一个数据表格
	    	//showDataTable();
		    //给行添加选中效果
		    /**
		    $('#warnconfig_table tbody').on( 'click', 'tr', function () {
	            if ( $(this).hasClass('selected') ) {
	                $(this).removeClass('selected');
	            }else {
	                $('tr.selected').removeClass('selected');
	                $(this).addClass('selected');
	            }
	        } );
		    
		    $('#warnconfig_table tbody').on( 'dblclick', 'td', function () {
		    	if( this.cellIndex < 2 ){
		    		return;
		    	}else{
		    		cell_index = this.cellIndex;
		    		config_id = Dtable_station_warnconfig.row( this ).data()['id'];
		    		old_value = this.innerText;
		    		m_devicename = Dtable_station_warnconfig.row( this ).data()['devicename'];
		    		m_option_name = Dtable_station_warnconfig.row( this ).data()['option_name'];
		    		global.showModal("修改设备预警配置", "warnsystem/warnconfig_edit.html");
		    	}
	        } );
		    
		    $('#warnconfig_table tbody').on( 'mouseover', 'td', function () {
		    	if( this.cellIndex > 1 ){
		    		$(this).css("cursor","pointer");
		    	}
	        } );
	    	**/
	    	
	    	$("#batch_warnconfig_modify").click(function(){
	    		device = null;
				$(" .device_tab_clicked").each(function(){
		        	if( device == null || device == "null" || device == "" ){
		        		device = this.id;
		        	}else{
		        		device += "," + this.id;
		        	}
		        });
	    		if( device != null ){
	    			global.search_station_ids = device;
	    			global.showModal("修改设备预警配置", "warnsystem/warnconfig_edit.html");
	    		}else{
	    			global.alert( "请先选中您需要批量修改的设备！" );
	    		}
	    	});
    });    
</script>
</body>
</html>